<template>
  <div :style='pageHeight'>
    <div v-for='page in pages' :key='page'>
      <!-- 分页 -->
      <div class='tab_company_out'>
        <div style='float: right;margin-right: 20px'>No:{{ tableData.orderNo }}</div>
        <span class='title'>{{ tableData.companyName }}
          <span style='padding-left: 10px' >{{tableData.orderTitle}}</span>
        </span>
        <div class='dan'><span></span></div>
        <div style='width:770px;padding-top:5px'>
          <span class='left' style='float:left;width:320px;text-align:left'>制单日期: {{ tableData.createDate }}</span>
          <span style='margin-left:275px;'>打印日期:{{tableData.createTime}}</span>
        </div>
        <table cellpadding='0' cellspacing='0' style='width:770px;float: left;margin-bottom: 8px'>
          <tr>
            <td style='font-weight: bold;width: 60px'>部门</td>
            <td colspan='2' style='width: 70px'>{{ tableData.deptName }}</td>
            <td style='font-weight: bold'>发货区域</td>
            <td colspan='3'>{{ tableData.sendArea }}</td>
            <td style='font-weight: bold'>业务编码</td>
            <td colspan='2'>{{ tableData.businessCode }}</td>
          </tr>
          <tr>
            <td style='font-weight: bold'>单位名称</td>
            <td colspan='2'>{{ tableData.customName }}</td>
            <td style='font-weight: bold'>发货方式</td>
            <td colspan='3'>{{ tableData.sendTypeName }}</td>
            <td style='font-weight: bold'>发票方式</td>
            <td colspan='2'>{{ tableData.invoiceSendType }}</td>
          </tr>
          <tr style='text-align: center;background-color: #ebebeb;font-weight: bold'>
            <td>序号</td>
            <td colspan='2'>商品名称</td>
            <td style='font-size: 9px'>规格</td>
            <td style='min-width:50px;'>数量</td>
            <td style='min-width:50px;'>单价</td>
            <td style='min-width:50px;'>金额</td>
            <td>回款金额</td>
            <td style='width: 80px'>回款日期</td>
            <td>回款银行</td>
          </tr>
          <!-- 每页显示onePageRow条数据 :rowspan='tableData.orderDetails.length' v-if='index==0' -->
          <tr v-for='(row,index) in tableData.orderDetails.slice((page-1)*pageSize,page*pageSize)' :key='index'>
            <td>{{ (page - 1) * pageSize + index + 1 }}</td>
            <td colspan='2'>{{ row.drugsName }}</td>
            <td class='td'>{{ row.drugsSpec }}</td>
            <td><span v-if='row.saleNum>=0&&row.drugsName&&row.saleType=="CHA"'>{{ row.saleNum }}</span></td>
            <td><span v-if='row.salePrice>=0&&row.drugsName&&row.saleType=="CHA"'>{{ row.salePrice }}</span></td>
            <td><span v-if='row.saleAmount!=0&&row.drugsName'>{{ row.saleAmount }}</span></td>
            <template v-if='index==0 && row.rowspan>1'>
              <td :rowspan='row.rowspan'><span v-if='row.returnAmount&&row.returnAmount>0'>{{ row.returnAmount }}</span> </td>
              <td :rowspan='row.rowspan'>{{ row.returnDate }}</td>
              <td :rowspan='row.rowspan'>{{ row.returnBank }}</td>
            </template>
            <template v-if='index==0 && row.rowspan==1'>
              <td :rowspan='row.rowspan'><span v-if='row.returnAmount&&row.returnAmount>0'>{{ row.returnAmount }}</span> </td>
              <td :rowspan='row.rowspan'>{{ row.returnDate }}</td>
              <td :rowspan='row.rowspan'>{{ row.returnBank }}</td>
            </template>
            <template v-if='index>0 && row.rowspan>=1'>
              <td :rowspan='row.rowspan'><span v-if='row.returnAmount&&row.returnAmount>0'>{{ row.returnAmount }}</span> </td>
              <td :rowspan='row.rowspan'>{{ row.returnDate }}</td>
              <td :rowspan='row.rowspan'>{{ row.returnBank }}</td>
            </template>
           
          </tr>
<!--          &lt;!&ndash; 插入空白行 &ndash;&gt;
          <template v-if='blankLines===true && tableData.orderDetails.slice((page-1)*pageSize,page*pageSize).length<pageSize'>
            <tr v-for='d in (pageSize-tableData.orderDetails.slice((page-1)*pageSize,page*pageSize).length)' :key='`_${d}_`'>
              <td></td>
              <td colspan='2'></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </template>-->
          <tr v-if='page==pages' style='background-color: #ebebeb;'>
            <td style='font-weight: bold'>合计</td>
            <td colspan='5' class='value'>{{ chineseTotal }}</td>
            <td>{{tableData.totalSaleAmount}}</td>
            <td colspan='3' class='value' style='text-align: right;padding-right: 10px'>{{tableData.payUserName}}</td>
          </tr>
          <tr v-else>
            <td>合计</td>
            <td colspan='3'>(合计打印到最后一页)</td>
            <td></td>
            <td colspan='4' class='value'></td>
          </tr>
          <tr style='height: 35px'>
            <td style='font-weight: bold'>开票员</td>
            <td>{{ tableData.nickName }}</td>
            <td style='font-weight: bold'>销售部长</td>
            <td>{{ tableData.nickName_nqbz }}</td>
            <td style='font-weight: bold'>商控员</td>
            <td colspan='2'>{{ tableData.nickName_swsky }}</td>
            <td style='font-weight: bold'>财务复核员</td>
            <td colspan='2'>{{ tableData.nickName_cwfhy }}</td>
          </tr>
        </table>
        <div class='text' style='margin-top: -8px;font-size: 10px'>白联销售┄红联结算┄黄联财务</div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "OrderPrint",
  // 制作打印模版组件时，props区域尽量保留。
  props: {
    // 接受的打印数据
    tableData: {
      type: Object,
      default() {
        return {
          orderNo: "",
          supplierName: "",
          deptName: "",
          customName: "",
          orderType: "",
          createDate: "",
          nickName_cwbz: "",
          nickName_cwzj: "",
          nickName_swsky: "",
          nickName_cwjsy: "",
          nickName_nqbz: "",
          nickName_cwfhy: "",
          returnBank: "",
          orderTitle: "",
          sendType: "",
          businessArea: "",
          businessCode: "",
          delivery: "",
          takeAmount: 0,
          totalSaleAmount: 0,
          sendTypeName:"",
          bankName: "",
          orderDetails: [
            {
              drugsName: "",
              item_unit: "40ML",
              drugsSpec: "",
              saleName: 0,
              salePrice: 0,
              saleAmount: 0,
              item_total: 5 * 188,
              item_total_pv: 5 * 150
            }
          ]
        }
      }
    },

    // 每页多少行
    onePageRow: {
      type: Number,
      default: 4
    },
    // 是否插入空白行
    blankLines: {
      type: Boolean,
      default: true
    },
    getChineseNumber: Function // 求数字的中文写法，从easyPrint组件传入
  },
  data() {
    return {}
  },
  created() {

  },
  computed: {
    pages() {
      // 求当前数据能打印的页数
      let pages_ = Math.ceil(this.tableData.orderDetails.length / this.pageSize) // 向上取整数
      return pages_ <= 0 ? 1 : pages_
    },
    pageSize() {
      // 每页打印的条数
      let size = this.tableData.orderDetails.length
      if (size <= 2) {
        size = 2
      }
      return size
    },
    pageHeight() {
      let num = this.tableData.orderDetails.length
      let height = "290px"
      if (num > 4) {
        height = 370 + (this.tableData.orderDetails.length - 4) * 43 + "px"
      }
      return {
        height: height
      }
    },
    chineseTotal() {
      // 计算中文合计，如果忘记传入
      return this.getChineseNumber != null ? this.getChineseNumber(this.tableData.totalSaleAmount) : ""
    }
  },

  methods: {
    computePageMoney(arr) {
      let sum = 0
      arr.forEach((item) => {
        sum += Number(item.goodsTotalMoney)
      })
      return sum
    }
  }
}
</script>
<style scoped media='print'>
* {
  padding: 0;
  margin: 0;
  font-color: #000000;
  color: #000000;
  list-style-type: none;
  font-family: "微软雅黑";
  font-size: 12px;
}

@page {
  size: auto;
  margin-top: 5mm;
  margin-left: 5mm;
  margin-right: 5mm;;
}

.text {
  float: right;
  letter-spacing: 1px;
  font-size: 6px;
  width: 12px;
}

.tab_company_out {
  text-align: center;
  width: 790px;
  page-break-after: always;
}

.value {
  text-align: left;
  width: 100px;
  padding-left: 10px;
}

.title {
  font-size: 19px;
  padding-left: 16%;
  font-weight: bold;
}

.dan {
  text-align: center;
  position: relative;
}


.dan span {
  position: absolute;
  right: 0;
}

p {
  overflow: hidden;
  padding: 10px 0;
}


p span ins {
  text-decoration: underline;
}

table {
  width: 100%;
  border: none;
  border-bottom: 1px solid #000;
}

table tr td {
  border: 1px solid #000;
  border-bottom: none;
  border-right: none;
  height: 25px;
  text-align: center;
  line-height: 25px;
}

table tr td:last-of-type,
table tr th:last-of-type {
  border-right: 1px solid #000;
}

table tr th {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  height: 22px;
  line-height: 22px;
  font-size: 14px;
}

table tr th:nth-child(2) {
  width: 0;
}

.lu {
  padding-left: 10px;
}

.lu li {
  float: left;
  text-align: left;
  width: calc(765px / 5);
}

.lu li label {
  width: 70px;
  display: inline-block;
}
.td{
  text-wrap: break-word;
  max-width: 130px;
}

/*.lu li:last-of-type {*/
/*margin-right: 20px;*/
/*float: right;*/
/*text-align: left;*/
/*}*/


</style>